<button class="button" type="submit">
  <svg viewBox="0 0 576 512" class="svg" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z"
      fill="#74C0FC"
    ></path>
  </svg>
  Hover Me
</button>

<style>
/* From Uiverse.io by vishal2231179  - Tags: button, light&dark, hover effect, hoverme, hover button, 3d button, button hover effect , generate button */
.button {
  cursor: pointer;
  /* padding: 15px; */
  padding: 20px;
  width: 190px;
  /* background-color: rgb(43, 43, 43); */
  border-radius: 30px;
  font-weight: 600;
  font-size: 20px;
  border-style: double;
  border-color: rgba(74, 61, 255, 0.753);

  color: rgba(126, 185, 236, 0.968);
  background-image: linear-gradient(to right, rgb(14, 15, 58), rgb(49, 3, 118));
  /* border-color: rgb(67, 67, 67); */
  transition: 300ms;
}
.button:hover {
  border-color: rgb(100, 43, 215);
  border-top-right-radius: 5%;
  border-bottom-left-radius: 5%;

  box-shadow: 0px 5px 10px 1px rgb(0, 0, 0);
  font-size: 22px;
  transition: 400px;
}
.svg {
  height: 20px;
}

</style>
    